O diagrama apresenta o estudo do fluxo de interação do usuário com o sistema interativo e muitas vezes sem a necessidade do desenho do design das telas da interface. Isso permite que o design das interações seja bem planejado e gere impacto na qualidade no design do wireframe interativo que será desenvolvido logo em seguida.
Cada tela apresentada no fluxo possui um Wireframe detalhado, disponível na plataforma Figma:
Todas as telas compartilham uma estrutura padrão composta por três blocos:
- Cabeçalho: logo do ConectaOng e menu principal (menu “hambúrguer”).
- Conteúdo: área principal para interação e apresentação das informações.
- Rodapé: informações da equipe e contato.
Cabeçalho, Conteúdo e rodapé.
Valida qual o tipo de registro
Conteúdo: campos para preenchimento de "Nome", "CPF", "E-mail", "Senha", "Sexo", "Descrição" e botão de “Registrar”.
Conteúdo: campos para preenchimento de "Título", "CNPJ", "Categoria", "Descrição", "Email", "Senha" e botão de “Registrar”.
Conteúdo: campos para preenchimento de "Evento", "Descrição", "Data", "Local" e “Registrar”.
Cabeçalho, Conteúdo e rodapé.
Conteúdo: tabela com detalhes de ongs cadastradas com Título, Descrição e Causa, barra de pesquisa e filtros disponíveis.
Conteúdo: tabela com nome de voluntários cadastrados, descrição e sexo.
Conteúdo: tabela com nome de eventos cadastrados, descrição", data", "local" e barra de pesquisa e filtros disponíveis.
Conteúdo: informações para contato do suporte técnico (telefone, WhatsApp e e-mail).
Links Úteis:
- Protótipos vs Wireframes
- Ferramentas de Wireframes
- MarvelApp
- Figma
- Adobe XD
- Axure (Licença Educacional)
- InvisionApp (Licença Educacional)